<template>
  <el-container>
    <el-main>
      <el-button @click="toBack">返回</el-button>
      <el-button v-print="'#print'" type="primary">打印</el-button>
      <div id="print">
        <!-- <span style="margin-left:70%">打印日期:{{ dateFormat(new Date()) }}</span> -->
        <h4 class="text">{{ name }}</h4>
        <p v-if="length==1" style="text-align:center;margin-top:-20px">地址：</p>
        <h4 class="text text_A">定作送货单</h4>
        <div v-if="length==1" class="case">
          <div>
            <p>客户名称：{{ fullName }}</p>
            <p>电话:</p>
            <p>地址:</p>
          </div>
          <div style="padding-top:30px">
            <p>送货单号：{{ outNo }}</p>
            <p>交货日期:{{ outDate }}</p>
          </div>
        </div>
        <br>
        <br>
        <table>
          <tr>
            <td v-if="length!==1" style="width:800px">客户名称</td>
            <td>订单编号</td>
            <td>箱型</td>
            <td>材质</td>
            <td>订单量</td>
            <td>送货量</td>
            <td>单价</td>
            <td>订单金额</td>
          </tr>
          <tr v-for="item in tableData" :key="item.id">
            <td v-if="length!==1">{{ item.name }}</td>
            <td>{{ item.customerNo }}</td>
            <td>{{ item.boxType }}</td>
            <td>{{ item.material }}</td>
            <td>{{ item.orderNum }}</td>
            <td>{{ item.alreadyDeliveryQuantity }}</td>
            <td>{{ item.perPrice }}</td>
            <td>{{ item.money }}</td>
          </tr>
          <!-- <tr>
            <td>送货总量：</td>
            <td>本页小计(人民币)：</td>
            <td>合计金额：23802</td>
          </tr> -->
        </table>
        <table style="margin-top:20px">
          <tr>
            <td><div class="span">送货总量：{{ sum_orderNum }}</div> </td>
            <td><div class="span">本页小计(人民币)：{{ sum_perPrice }}</div></td>
            <td><div class="span">合计金额：{{ sum_perPrice }}</div></td>
          </tr>
          <tr>
            <td colspan="2"><div class="span">备注：{{ remark }}</div></td>
            <td><div class="span">收货人：{{ fullName }}</div></td>
          </tr>
          <tr>
            <td><div class="span">制单人：{{ names }}</div></td>
            <td><div class="span">送货人：{{ nickname }}</div></td>
            <td><div class="span">收货单位(签章)：</div></td>
          </tr>
        </table>
        <div class="footer">
          <div>
            <p>开票时间：{{ dateFormat(new Date()) }} </p>
            <p>客户满意度调查：满意口&nbsp;一般口&nbsp;差口&nbsp;很差口</p>
          </div>
          <div class="ca">
            <p> 1.本定作送货单是合同的组成部分,如无书面合同,本定作送货单代合同.</p>
            <p> 2.收货单位如发现质量问题.请将原产品三日内退回,收货方使用过的产品供方概不负责.</p>
            <p> 3.本定作送货单之价款如双方发生纠纷,合同履行地为供方所在地.</p>
            <p> 4.本定作送货单经收货方签字之后生效. </p>
          </div>
        </div>
        <!-- <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          highlight-current-row
          show-summary
          style="width: 100%"
        >
          <el-table-column width="50px" align="center" />
          <el-table-column prop="customerNo" label="订单编号" />
          <el-table-column prop="orderNum" label="订单量" />
          <el-table-column prop="alreadyDeliveryQuantity" label="送货量" />
          <el-table-column prop="perPrice" label="单价" />
          <el-table-column prop="money" label="订单金额" />
          <el-table-column prop="remark" label="备注" />
        </el-table> -->
        <!-- <br>
        <Br />
        <span style="margin-left:444px">送单人:{{ nickname }}</span>
        <span style="margin-left:385px">收货单位(签章):{{ }}</span>
        <span style="margin-left:888px">经手人:{{ }}</span>
        <br>
        <Br />
        <span style="margin-left:60px">
          1.本定作送货单是合同的组成部分,如无书面合同,本定作送货单代合同.
        </span>
        <span style="margin-left:20%">
          2.收货单位如发现质量问题.请将原产品三日内退回,收货方使用过的产品供方概不负责.
        </span>
        <br>
        <span style="margin-left:60px">
          3.本定作送货单之价款如双方发生纠纷,合同履行地为供方所在地.
        </span>
        <span style="margin-left:22%">
          4.本定作送货单经收货方签字之后生效.
        </span> -->

        <!-- <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :total="pagination.total"
          align="center"
          :current-page="pagination.page"
          :page-size="pagination.size"
          @size-change="sizeChange"
          @current-change="pageChange"
        /> -->
      </div>
    </el-main>
  </el-container>
</template>

<script scope>
import initData from '@/mixins/initData'
import { getNamesById } from '@/api/purchase/purchase'
import { list } from '@/api/basedata/firm'
import { getUser } from '@/api/order/customerOrder'

export default {
  name: 'EndProductListDeliveryNote',
  mixins: [initData],
  data() {
    return {
      tableData: [],
      form: {},
      data: [],
      billingDate: '',
      customerId: '',
      fullName: '',
      remark: '',
      createdBy: '',
      nickname: '',
      date: new Date(),
      name: '',
      outNo: '',
      outDate: '',
      sum_perPrice: '',
      orderNum: '',
      names: '',
      length: '',
      tempArray: [],
      different: ''
    }
  },
  created() {
    this.data = this.$route.query.data
    console.log('a', this.data)
    this.tempArray = this.$route.query.data
    this.length = this.data.length
    // 判断是否为相同客户
    for (var i = 0; i < this.tempArray.map(x => x.name).length; i++) {
      for (var j = i + 1; j < this.tempArray.map(x => x.name).length; j++) {
        if (this.tempArray.map(x => x.name)[i] !== this.tempArray.map(x => x.name)[j]) {
          this.length = 2
          this.different = 2
          // console.log(this.length)
        } else {
          this.length = 1
          // console.log(this.length)
        }
      }
    }
    if (this.different === 2) {
      this.length = 2
    }
    if (this.data[0].b === 1) {
      this.length = 1
    }
    if (this.data[0].a === 2) {
      this.length = 2
    }
    if (this.data.length === 1) {
      this.length = 1
      console.log(this.length)
    }
    // console.log(this.data[0].a)
    this.getList()
  },
  methods: {
    dateFormat: function(time) {
      var date = new Date(time)
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
     * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      // var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      // var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      // var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      return year + '-' + month + '-' + day
    },
    getList() {
      this.tableData = this.data
      var sum = 0
      var sum_order = 0
      this.tableData.forEach(a => {
        a.amount = a.unitPrice * a.deliveryQuantity
        this.billingDate = a.billingDate
        this.documentsNo = a.documentsNo
        this.remark = a.remark
        this.customerId = a.customerId
        this.createdBy = a.createdBy
        this.fullName = a.name
        this.outNo = a.outNo
        this.outDate = a.outDate
        sum += a.money
        sum_order += a.orderNum
      })
      this.sum_perPrice = sum
      this.sum_orderNum = sum_order
      this.pagination.total = this.tableData.length
      this.getName()
      list().then(res => {
        var firmList = []
        firmList = res.list
        firmList.forEach(a => {
          if (a.isFirm === true) {
            this.name = a.name
            // console.log('a', this.name)
          }
        })
      })
      getUser().then(res => {
        this.names = res.nickname
      })
    },
    // 名称
    getName() {
      getNamesById(this.createdBy).then(res => {
        // console.log(res)
        this.nickname = res
      })
    },
    // 返回
    toBack() {
      this.$router.push('/end_product_list')
    }
  }
}
</script>

<style scoped  lang="scss">

.case{
  display: flex;
  justify-content: space-between;
  width: 900px;
  margin: 0 auto;
  margin-bottom: -45px;
}
.text{
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  // margin: 10px 0 -10px 0;

}
.text_A{
  margin-top: -10px;
}
i {
  cursor: pointer;
}
table,tr,td{
  border:1px solid black;
}
table{
  width:900px;
  border-collapse:collapse;
  height: auto;
  margin: 0 auto;

}
tr{
  height: 35px;
}
table td{
  height: 35px;
}
td{
  width: 180px;
  text-align: center ;
  padding-left:15px;

}
.span{
  font-weight:bold;
  text-align:left
}
.footer{
  width: 900px;
  padding: 0 10px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .ca{
    font-size: 12px;
  }
}
</style>
<style media="print">
  body {
    border: solid 1px #ffffff;
    margin:0;
  }
</style>
